<template>
  <div class="core-stats-card">

    <div class="stats-container">
      <!-- 房屋总数 -->
      <div class="stat-item total">
        <div class="stat-number">{{ formatNumber(totalHouses) }}</div>
        <div class="stat-label">房屋总数</div>
        <!--<div class="stat-badge total-badge">总数</div>-->
      </div>

      <!-- 已入住房屋数 -->
      <div class="stat-item occupied">
        <div class="stat-number">{{ formatNumber(occupiedHouses) }}</div>
        <div class="stat-label">已入住房屋数</div>
        <!--<div class="stat-badge occupied-badge">已入住</div>-->
      </div>

      <!-- 空置房屋数 -->
      <div class="stat-item vacant">
        <div class="stat-number">{{ formatNumber(vacantHouses) }}</div>
        <div class="stat-label">空置房屋数</div>
        <!--<div class="stat-badge vacant-badge">空置</div>-->
      </div>

      <!-- 即将到期合同数 -->
      <div class="stat-item expiring">
        <div class="stat-number">{{ formatNumber(expiringContracts) }}</div>
        <div class="stat-label">即将到期合同数</div>
        <!--<div class="stat-badge expiring-badge">即将到期</div>-->
      </div>

      <!-- 逾期未缴费房屋数 -->
      <div class="stat-item overdue">
        <div class="stat-number">{{ formatNumber(overdueHouses) }}</div>
        <div class="stat-label">逾期未缴费房屋数</div>
        <!--<div class="stat-badge overdue-badge">逾期</div>-->
      </div>

      <!-- 缴费完成率 -->
      <div class="stat-item payment">
        <div class="stat-number">{{ paymentRate }}<span class="percentage">%</span></div>
        <div class="stat-label">缴费完成率</div>
        <!--<div class="stat-badge payment-badge">完成率</div>-->
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  totalHouses: { type: Number, default: 0 },
  vacantHouses: { type: Number, default: 0 },
  occupiedHouses: { type: Number, default: 0 },
  expiringContracts: { type: Number, default: 0 },
  overdueHouses: { type: Number, default: 0 },
  paymentRate: { type: Number, default: 0 }
})

const formatNumber = (num) => {
  if (num === null || num === undefined) return '0'
  return num.toLocaleString()
}

const computedOccupiedHouses = computed(() => {
  if (props.occupiedHouses > 0) {
    return props.occupiedHouses
  }
  return props.totalHouses - props.vacantHouses
})
</script>

<style scoped lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.core-stats-card {
  @include card-style;
  width: 100%;
  height: 93%;
  padding: 0;
  background: linear-gradient(135deg, rgba(10, 15, 37, 0.8), rgba(6, 10, 26, 0.9));
  border: 1px solid rgba(24, 144, 255, 0.3);
}

.card-header {
  padding: 24px 0 16px;
  text-align: center;
  position: relative;
}

.card-title {
  font-size: 28px;
  font-weight: 700;
  color: #e6ff00;
  margin: 0;
  text-shadow: 0 0 15px rgba(230, 255, 0, 0.5);
  letter-spacing: 1px;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 10px 20px 4px 20px;
  flex: 1;
}

.stat-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 8px 8px 16px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 100px;
  border: 2px solid transparent;
}

/* 悬停效果 */
.stat-item:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

/* 数字样式 - 超大字体 */
.stat-number {
  font-size: 48px;
  font-weight: 800;
  color: white;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.1;
  font-family: 'Arial', sans-serif; /* 数字字体更清晰 */
}

.percentage {
  font-size: 32px;
  color: #bfbfbf;
}

/* 标签样式 */
.stat-label {
  font-size: 16px;
  color: #bfbfbf;
  text-align: center;
  font-weight: 400;
  line-height: 1.4;
  max-width: 180px;
}

/* 角标样式 */
.stat-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 各类型样式 */
.stat-item.total {
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.15), rgba(64, 169, 255, 0.1));
  border-color: rgba(24, 144, 255, 0.4);
}

.total .stat-number {
  color: #40a9ff;
  text-shadow: 0 0 20px rgba(64, 169, 255, 0.4);
}

.total-badge {
  background: rgba(24, 144, 255, 0.2);
  color: #40a9ff;
  border: 1px solid rgba(64, 169, 255, 0.3);
}

.stat-item.occupied {
  background: linear-gradient(135deg, rgba(82, 196, 26, 0.15), rgba(115, 209, 61, 0.1));
  border-color: rgba(82, 196, 26, 0.4);
}

.occupied .stat-number {
  color: #73d13d;
  text-shadow: 0 0 20px rgba(115, 209, 61, 0.4);
}

.occupied-badge {
  background: rgba(82, 196, 26, 0.2);
  color: #73d13d;
  border: 1px solid rgba(115, 209, 61, 0.3);
}

.stat-item.vacant {
  background: linear-gradient(135deg, rgba(250, 173, 20, 0.15), rgba(255, 197, 61, 0.1));
  border-color: rgba(250, 173, 20, 0.4);
}

.vacant .stat-number {
  color: #ffc53d;
  text-shadow: 0 0 20px rgba(255, 197, 61, 0.4);
}

.vacant-badge {
  background: rgba(250, 173, 20, 0.2);
  color: #ffc53d;
  border: 1px solid rgba(255, 197, 61, 0.3);
}

.stat-item.expiring {
  background: linear-gradient(135deg, rgba(250, 173, 20, 0.15), rgba(255, 197, 61, 0.1));
  border-color: rgba(250, 173, 20, 0.4);
}

.expiring .stat-number {
  color: #fa8c16;
  text-shadow: 0 0 20px rgba(250, 140, 22, 0.4);
}

.expiring-badge {
  background: rgba(250, 173, 20, 0.2);
  color: #fa8c16;
  border: 1px solid rgba(250, 140, 22, 0.3);
}

.stat-item.overdue {
  background: linear-gradient(135deg, rgba(245, 34, 45, 0.15), rgba(255, 77, 79, 0.1));
  border-color: rgba(245, 34, 45, 0.4);
}

.overdue .stat-number {
  color: #ff4d4f;
  text-shadow: 0 0 20px rgba(255, 77, 79, 0.4);
}

.overdue-badge {
  background: rgba(245, 34, 45, 0.2);
  color: #ff4d4f;
  border: 1px solid rgba(255, 77, 79, 0.3);
}

.stat-item.payment {
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.15), rgba(186, 104, 200, 0.1));
  border-color: rgba(155, 89, 182, 0.4);
}

.payment .stat-number {
  color: #d884ff;
  text-shadow: 0 0 20px rgba(216, 132, 255, 0.4);
}

.payment-badge {
  background: rgba(155, 89, 182, 0.2);
  color: #d884ff;
  border: 1px solid rgba(216, 132, 255, 0.3);
}

</style>
